/**
 * 防止内容区域滚到底后引起页面整体的滚动
 * @param {*} className 容器类名
 */
export default function (className) {
  // 防止内容区域滚到底后引起页面整体的滚动
  const content = document.querySelector(className);

  const dragObj = {
    startY: 0,
    status: "11",
  }

  content.addEventListener("touchstart", function (e) {
    dragObj.startY = e.touches[0].clientY;
  });

  content.addEventListener("touchmove", function (e) {
    // 高位表示向上滚动
    // 底位表示向下滚动
    // 1容许 0禁止
    const currentY = e.touches[0].clientY;

    if (this.scrollTop === 0) {
      // 如果内容小于容器则同时禁止上下滚动
      dragObj.status = this.offsetHeight >= this.scrollHeight ? "00" : "01";
    } else if (this.scrollTop + this.offsetHeight >= this.scrollHeight) {
      // 已经滚到底部了只能向上滚动
      dragObj.status = "10";
    }

    if (dragObj.status != "11") {
      // 判断当前的滚动方向
      const direction = currentY - dragObj.startY > 0 ? "10" : "01";

      // 操作方向和当前允许状态求与运算，运算结果为0，就说明不允许该方向滚动，则禁止默认事件，阻止滚动
      if (!(parseInt(dragObj.status, 2) & parseInt(direction, 2))) {
        e.preventDefault();
      }
    }
  }, {
    passive: false
  });
}
